<template>
	<div
	>
		<div class="top" style="display: flex; justify-content:flex-end ; margin: 10px 2px 15px 0px; color: beige;"><i class="el-icon-location-outline" style="margin-right: 5px;" />{{ text }}</div>
	
		
			
			<div class="block">
				 <el-collapse v-model="activeNames" >
					<el-collapse-item title="颜色分级" name="ColorGrading" >
						<el-collapse-item title="白平衡:WhiteBalance" name="WhiteBalance" >
							
								<el-collapse-item title="色温:Temp" name="WhiteTemp"  >
								<div style="display: flex; align-items: center;" >
									<Radio :nameProp='this.sliders[0].name' :objpath='this.ObjectPath' ></Radio>
									<div style="width: 95%; margin-left: 10px;">
										<el-slider v-model="values[0].value"
										:min="1500"
										:max="15000"
										:show-tooltip="false"
										show-input
										:step="0.01"
										@input="slidersput(0,'WhiteTemp')"
										></el-slider>
									</div>	
								</div>
								
							</el-collapse-item>
							
							
							
							<el-collapse-item title="着色:Tint" name="WhiteTint" >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='this.sliders[1].name' :objpath='this.ObjectPath'></Radio>
								<div style="width: 95%; margin-left: 10px;">
								<el-slider v-model="values[1].value"
								:min="-1"
								:max="1"
								:show-tooltip="false"
								show-input
								:step="0.001"
								@input="slidersput(1,'WhiteTint')"
								></el-slider>
								</div>
								</div>
							</el-collapse-item>
						 </el-collapse-item>
						
						<el-collapse-item title="整体:Global" name="Global" >
							
							<div v-for="(item,i) in this.ColorGrading.Global" :key="i" :title=chinese[i]>	<span class="spancss">{{chinese[i]}}</span>								
									<div style="display: flex; align-items: center;">
									<Radio :nameProp='item.name' :objpath="ObjectPath" ></Radio>
									<div style="width: 95%; margin-left: 10px;">
									<el-color-picker
									 v-model="sourcecolor.Global[i].rgb"
									 show-alpha
									 @active-change="Color=>index(Color, i,item.top)"
									 @change="Color=>change(Color, i,item.top)"
									
									 :predefine="predefineColors">
									</el-color-picker>
									</div>
									</div>
							</div>	
						</el-collapse-item>
						
						<el-collapse-item title="阴影:Shadows" name="Shadows" >
							<el-collapse-item  :name=item.name v-for="(item,i) in this.ColorGrading.Shadows" :key="i"  :title=chinese[i] >
									
									<div style="display: flex; align-items: center;">
									<Radio :nameProp='item.name':objpath="ObjectPath" ></Radio>
									<div style="width: 95%; margin-left: 10px;">
									<el-color-picker
									 v-model="sourcecolor.Shadows[i].rgb"
									 show-alpha
									 @active-change="Color=>index(Color, i,item.top)"
									 @change="Color=>change(Color, i,item.top)"
									
									 :predefine="predefineColors">
									</el-color-picker>
									</div>
									</div>
									
							</el-collapse-item>
							
							<el-collapse-item title="最大阴影:ShadowsMax" name="ShadowsMax" >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='this.sliders[2].name' :objpath='this.ObjectPath'></Radio>
								<div style="width: 95%; margin-left: 10px;">	
								<el-slider v-model="values[2].value"
								:min="-1"
								:max="1"
								:show-tooltip="false"
								show-input
								:step="0.001"
								@input="slidersput(2,'ShadowsMax')"
								></el-slider>
								</div>
								</div>
							</el-collapse-item>
						</el-collapse-item>
						
						<el-collapse-item title="中间色调:Midtones" name="Midtones" >
							<el-collapse-item  :name=item.name v-for="(item,i) in this.ColorGrading.Midtones" :key="i" :title=chinese[i] >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='item.name':objpath="ObjectPath" ></Radio>
								<div style="width: 95%; margin-left: 10px;">
								
									<el-color-picker
									 v-model="sourcecolor.Midtones[i].rgb"
									 show-alpha
									 @active-change="Color=>index(Color, i,item.top)"
									 @change="Color=>change(Color, i,item.top)"
									
									 :predefine="predefineColors">
									</el-color-picker>
									</div>
									</div>
							</el-collapse-item>	
						</el-collapse-item>
						
						<el-collapse-item title="高光区域:Highlights" name="Highlights" >
							
							<el-collapse-item  :name=item.name v-for="(item,i) in this.ColorGrading.Highlights" :key="i" :title=chinese[i] >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='item.name':objpath="ObjectPath" ></Radio>
								<div style="width: 95%; margin-left: 10px;">
									<el-color-picker
									 v-model="sourcecolor.Highlights[i].rgb"
									 show-alpha
									 @active-change="Color=>index(Color, i,item.top)"
									 @change="Color=>change(Color, i,item.top)"
									
									 :predefine="predefineColors">
									</el-color-picker>
									</div>
									</div>
							</el-collapse-item>	
							
							<el-collapse-item title="最小高光:HighlightsMin" name="HighlightsMin" >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='this.sliders[3].name' :objpath='this.ObjectPath'></Radio>
								<div style="width: 95%; margin-left: 10px;">	
								<el-slider v-model="values[3].value"
								:min="-1"
								:max="1"
								:show-tooltip="false"
								show-input
								:step="0.001"
								@input="slidersput(3,'HighlightsMin')"
								></el-slider>
								</div>
								</div>
							</el-collapse-item>
							
						</el-collapse-item>
						
						<el-collapse-item title="杂项:Misc" name="Misc" >
							
							<!-- <el-collapse-item  :name=item.name v-for="(item,i) in this.ColorGrading.Highlights" :key="i" :title=chinese[i] >
								<div style="display: flex; align-items: center;">
								<Radio :nameProp='item.name':objpath="ObjectPath" ></Radio>
								<div style="width: 95%; margin-left: 10px;">
									<el-color-picker
									 v-model="sourcecolor.Highlights[i].rgb"
									 show-alpha
									 @active-change="Color=>index(Color, i,item.top)"
									 @change="Color=>change(Color, i,item.top)"
									
									 :predefine="predefineColors">
									</el-color-picker>
									</div>
									</div>
							</el-collapse-item>	 -->
							
							<el-collapse-item  :name="item" v-for="(item ,i) in Misc" :title="item" :key="i" >
								<div style="display: flex; align-items: center;">
								 <Radio :nameProp='item' :objpath='ObjectPath'></Radio>
								 <div style="width: 95%; margin-left: 10px;">
								<el-slider v-model="Miscvalues[i].value"
								:min="0"
								:max="1"
								:show-tooltip="false"
								show-input
								:step="0.001"
								@input="slidersput(i+10, item)"
								></el-slider>
								</div>
								</div>
								
							</el-collapse-item>
							
						</el-collapse-item>
						
						
						
									
					 </el-collapse-item>
					 
					 
					 
					 
					 
					 <el-collapse-item title="电影" name="Film">
						
						 <el-collapse-item title="斜面:FilmSlope" name="FilmSlope" >
							 <div style="display: flex; align-items: center;">
							 <Radio :nameProp='this.sliders[4].name' :objpath='this.ObjectPath'></Radio>
							 <div style="width: 95%; margin-left: 10px;">
						 	<el-slider v-model="values[4].value"
						 	:min="0"
						 	:max="1"
						 	:show-tooltip="false"
						 	show-input
						 	:step="0.001"
						 	@input="slidersput(4,'FilmSlope')"
						 	></el-slider>
							</div>
							</div>
						 </el-collapse-item>
						 
						 <el-collapse-item title="趾部:FilmToe" name="FilmToe" >
							 <div style="display: flex; align-items: center;">
							 <Radio :nameProp='this.sliders[5].name' :objpath='this.ObjectPath'></Radio>
							 <div style="width: 95%; margin-left: 10px;">
						 	<el-slider v-model="values[5].value"
						 	:min="0"
						 	:max="1"
						 	:show-tooltip="false"
						 	show-input
						 	:step="0.001"
						 	@input="slidersput(5,'FilmToe')"
						 	></el-slider>
							</div>
							</div>
						 </el-collapse-item>
						 
						 <el-collapse-item title="肩部:FilmShoulder" name="FilmShoulder" >
							 <div style="display: flex; align-items: center;">
							 <Radio :nameProp='this.sliders[6].name' :objpath='this.ObjectPath'></Radio>
							 <div style="width: 95%; margin-left: 10px;">
						 	<el-slider v-model="values[6].value"
						 	:min="0"
						 	:max="1"
						 	:show-tooltip="false"
						 	show-input
						 	:step="0.001"
						 	@input="slidersput(6,'FilmShoulder')"
						 	></el-slider>
							</div>
							</div>
						 </el-collapse-item>
						 
						 <el-collapse-item title="黑色调:FilmBlackClip" name="FilmBlackClip" >
							 <div style="display: flex; align-items: center;">
							 <Radio :nameProp='this.sliders[7].name' :objpath='this.ObjectPath'></Radio>
							 <div style="width: 95%; margin-left: 10px;">
						 	<el-slider v-model="values[7].value"
						 	:min="0"
						 	:max="1"
						 	:show-tooltip="false"
						 	show-input
						 	:step="0.001"
						 	@input="slidersput(7,'FilmBlackClip')"
						 	></el-slider>
							</div>
							</div>
						 </el-collapse-item>
						 
						 <el-collapse-item title="白色调:FilmWhiteClip" name="FilmWhiteClip" >
							 <div style="display: flex; align-items: center;">
							 <Radio :nameProp='this.sliders[8].name' :objpath='this.ObjectPath'></Radio>
							 <div style="width: 95%; margin-left: 10px;">
						 	<el-slider v-model="values[8].value"
						 	:min="0"
						 	:max="1"
						 	:show-tooltip="false"
						 	show-input
						 	:step="0.001"
						 	@input="slidersput(8,'FilmWhiteClip')"
						 	></el-slider>
							</div>
							</div>
						 </el-collapse-item>
						 
						
						
					</el-collapse-item>
				</el-collapse>
				
			</div>
			
		   <!-- <button @click="dianji()">测试</button> -->
	</div>
</template>

<script>
	import Radio from '../../components/Radio.vue'
	export default{
		components:{
			Radio
		},
		data(){
			return{
				loading: true,
				activeNames:[],
				value2:2500,
				value3:0,
				
				sourcecolor:{
					"Global":[
						{rgb:""},
						{rgb:"rgba(157, 2, 72, 1)"},
						{rgb:"rgba(157, 22, 72, 1)"},
						{rgb:"rgba(157, 32, 92, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"}
					],
					"Shadows":[
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
					],
					"Midtones":[
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
					],
					"Midtones":[
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						
					],
					"Highlights":[
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
						{rgb:"rgba(157, 42, 112, 1)"},
					]
				},
				
				
				
				
				
				predefineColors: [
				  '#ff4500',
				  '#ff8c00',
				  '#ffd700',
				  '#90ee90',
				  '#00ced1',
				  '#1e90ff',
				  '#c71585',
				  'rgba(255, 69, 0, 0.68)',
				  'rgb(255, 120, 0)',
				  'hsv(51, 100, 98)',
				  'hsva(120, 40, 94, 0.5)',
				  'hsl(181, 100%, 37%)',
				  'hsla(209, 100%, 56%, 0.73)',
				  '#c7158577'
				],
				
				socket:"",
				text:'PostProcessVolume',
				ObjectPath:'',
				Access:"WRITE_TRANSACTION_ACCESS",
			
				LightColor:{R:'',
					G:'',
					B:'',
					A:''},
			
				
				ifvalue2:'',
				
				Colorselect:{
					"Global":[
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}}
					],
					"Shadows":[
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}}
					],
					"Midtones":[
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}}
					],
					"Highlights":[
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}},
						{color:{R:'',G:'',B:'',A:''}}
					]
				},
						
				
				
				ColorGrading:{
					"Global":[
						{name:"ColorSaturation",top:"Global",objpath:"/Game/NewMap.NewMap:PersistentLevel.PostProcessVolume_1"},
						{name:"ColorContrast",top:"Global"},
						{name:"ColorGamma",top:"Global"},
						{name:"ColorGain",top:"Global"},
						{name:"ColorOffset",top:"Global"},
					],
					"Shadows":[
						{name:"ColorSaturationShadows",top:"Shadows"},
						{name:"ColorContrastShadows",top:"Shadows"},
						{name:"ColorGammaShadows",top:"Shadows"},
						{name:"ColorGainShadows",top:"Shadows"},
						{name:"ColorOffsetShadows",top:"Shadows"},
					],
					"Midtones":[
						{name:"ColorSaturationMidtones",top:"Midtones"},
						{name:"ColorContrastMidtones",top:"Midtones"},
						{name:"ColorGammaMidtones",top:"Midtones"},
						{name:"ColorGainMidtones",top:"Midtones"},
						{name:"ColorOffsetMidtones",top:"Midtones"},
					],
					"Highlights":[
						{name:"ColorSaturationHighlights",top:"Highlights"},
						{name:"ColorContrastHighlights",top:"Highlights"},
						{name:"ColorGammaHighlights",top:"Highlights"},
						{name:"ColorGainHighlights",top:"Highlights"},
						{name:"ColorOffsetHighlights",top:"Highlights"},
						
					],
					
				},
				Misc:[
					"BlueCorrection",
					"ExpandGamut",
					"ToneCurveAmount",
					"ColorGradingIntensity",
				],
				Miscvalues:[
					{value:0.6},
					{value:1},
					{value:1},
					{value:1},
					
				],
				chinese:[
					"饱和度",
					"对比度",
					"伽马",
					"增益",
					"偏差",
				],
				values:[
					{value:6500},
					{value:0},
					{value:0.09},
					{value:0.5},
					{value:0.6},
					{value:1},
					{value:1},
					{value:1},
					{value:1},
				],
				
				sliders:[
					
					{name:"WhiteTemp"},
					{name:"WhiteTint"},
					{name:"ColorCorrectionShadowsMax"},
					{name:"ColorCorrectionHighlightsMin"},
					{name:"FilmSlope"},
					{name:"FilmToe"},
					{name:"FilmShoulder"},
					{name:"FilmBlackClip"},
					{name:"FilmWhiteClip"},
					
					
				],
				tests:''
				
						
			}
		},
		mounted(){
			// this.changeData()
			this.GetObjectPath()
			// this.getstorevalue()
			// console.log(this.Colorselect.Shadows[1].name)
		},
		computed:{
			// 	value2(){
			// 		return this.$store.state.postvalue
			// 	}
			
		},
		methods:{
			
			
			slidersput(n,slidername){
				let array = this.activeNames
				let json ={"Settings":{}}
				let matcharr=array.indexOf(slidername)
				// console.log(this.Miscvalues[0].value)
				if(matcharr >0){
					if(n >= 10){
						let name =slidername
						let indexs =n-10
						
						json.Settings[name]=this.Miscvalues[indexs].value
					}else{
						let name =this.sliders[n].name
						
						json.Settings[name]=this.values[n].value
					}
				
				
				
				
				this.axios.put('/remote/object/property',
				{
						"objectPath" :this.ObjectPath,
							"access" :this.Access,
							"propertyName" :"Settings",
							"propertyValue" :json
								 
					
				},
				{
					headers:{
						'Content-Type': 'application/json'
					}
				}
				
				
				).then((res) =>{
					console.log(1111111111)
					
				},
				(err)=>{
					
				}
				)
				}
				
			
				
			},
			
			change(color,n,name){
				let names ,json2;
				// console.log(name)
				let upname = this.ColorGrading;
				for(let i in upname){
					upname=i.match(name)
					if(upname != null){
						if(upname.input == 'Global'){
							names=this.ColorGrading.Global[n].name
						}else if(upname.input == 'Shadows'){
							names=this.ColorGrading.Shadows[n].name
						}
						else if(upname.input == 'Midtones'){
							names=this.ColorGrading.Midtones[n].name
						}
						else if(upname.input == 'Highlights'){
							names=this.ColorGrading.Highlights[n].name
						}
						
					}
						
						
				}
						
						
						
						
						
						
				if(color == null){
						json2={
							X: 1,
							Y: 1,
							Z: 1,
							W: 1
						}
						
					}
				// let json3 ={
				// 	"Settings":{
						
				// 	}
				// }
				// json3.seting[names]=json2
				let json={
					"Settings":{
							
					}
				}
				json.Settings[names] =json2
				
				if(color == null){
					this.axios.put('/remote/object/property',
				{
						"objectPath" :this.ObjectPath,
							"access" :this.Access,
							"propertyName" :"Settings",
							"propertyValue" :json
								 
					
				},
				{
					headers:{
						'Content-Type': 'application/json'
					}
				}
				
				
				).then((res) =>{
					// this.setthisvalue(2)
					
				})
				
				}
			
				
				
			},
			index(color,n,name){
				// this.ifvalue2=2
				// console.log(name,'111111111111111111')
				let upname1,upname2;
				var c = color;
				var rgb = (c.toString()).replace(/^rgba?\(|\s+|\)$/g,'').split(',');
				let upname = this.ColorGrading;
				for(let i in upname){
					upname1=i.match(name)
					// console.log(name,'111111111111111111')
					if(upname1 != null){
						
						if(upname1.input == "Global"){
							
							this.Colorselect.Global[n].color.R=parseInt(rgb[0]) ;
							this.Colorselect.Global[n].color.G=parseInt(rgb[1]) ;
							this.Colorselect.Global[n].color.B=parseInt(rgb[2]) ;
							this.Colorselect.Global[n].color.A=rgb[3] ;
							let max=this.Colorselect.Global[n].color.R
							for(let i in this.Colorselect.Global[n].color){
								var cat =this.Colorselect.Global[n].color[i]
								cat > max ? max=cat :null
								
							}
							for(let i in this.Colorselect.Global[n].color){
								this.Colorselect.Global[n].color[i]=parseInt(this.Colorselect.Global[n].color[i]/max*1000)/1000
								if(this.Colorselect.Global[n].color[i]==this.Colorselect.Global[n].color.A){
									this.Colorselect.Global[n].color[i]=parseInt(rgb[3]*100)/100
									
								}
							}
							this.tests=this.Colorselect.Global[n].color
							
						}else if(upname1.input == "Shadows"){
							this.Colorselect.Shadows[n].color.R=parseInt(rgb[0]) ;
							this.Colorselect.Shadows[n].color.G=parseInt(rgb[1]) ;
							this.Colorselect.Shadows[n].color.B=parseInt(rgb[2]) ;
							this.Colorselect.Shadows[n].color.A=rgb[3] ;
							let max=this.Colorselect.Shadows[n].color.R
							for(let i in this.Colorselect.Shadows[n].color){
								var cat =this.Colorselect.Shadows[n].color[i]
								cat > max ? max=cat :null
								
							}
							for(let i in this.Colorselect.Shadows[n].color){
								this.Colorselect.Shadows[n].color[i]=parseInt(this.Colorselect.Shadows[n].color[i]/max*1000)/1000
								if(this.Colorselect.Shadows[n].color[i]==this.Colorselect.Shadows[n].color.A){
									this.Colorselect.Shadows[n].color[i]=parseInt(rgb[3]*100)/100
									
								}
							}
							
						}
						else if(upname1.input == "Midtones"){
							this.Colorselect.Midtones[n].color.R=parseInt(rgb[0]) ;
							this.Colorselect.Midtones[n].color.G=parseInt(rgb[1]) ;
							this.Colorselect.Midtones[n].color.B=parseInt(rgb[2]) ;
							this.Colorselect.Midtones[n].color.A=rgb[3] ;
							let max=this.Colorselect.Midtones[n].color.R
							for(let i in this.Colorselect.Midtones[n].color){
								var cat =this.Colorselect.Midtones[n].color[i]
								cat > max ? max=cat :null
								
							}
							for(let i in this.Colorselect.Midtones[n].color){
								this.Colorselect.Midtones[n].color[i]=parseInt(this.Colorselect.Midtones[n].color[i]/max*1000)/1000
								if(this.Colorselect.Midtones[n].color[i]==this.Colorselect.Midtones[n].color.A){
									this.Colorselect.Midtones[n].color[i]=parseInt(rgb[3]*100)/100
									
								}
							}
							
						}
						else if(upname1.input == "Highlights"){
							this.Colorselect.Highlights[n].color.R=parseInt(rgb[0]) ;
							this.Colorselect.Highlights[n].color.G=parseInt(rgb[1]) ;
							this.Colorselect.Highlights[n].color.B=parseInt(rgb[2]) ;
							this.Colorselect.Highlights[n].color.A=rgb[3] ;
							let max=this.Colorselect.Highlights[n].color.R
							for(let i in this.Colorselect.Highlights[n].color){
								var cat =this.Colorselect.Highlights[n].color[i]
								cat > max ? max=cat :null
								
							}
							for(let i in this.Colorselect.Highlights[n].color){
								this.Colorselect.Highlights[n].color[i]=parseInt(this.Colorselect.Highlights[n].color[i]/max*1000)/1000
								if(this.Colorselect.Highlights[n].color[i]==this.Colorselect.Highlights[n].color.A){
									this.Colorselect.Highlights[n].color[i]=parseInt(rgb[3]*100)/100
									
								}
							}
							
						}
						else if(upname1.input == "Mise"){
							this.Colorselect.Mise[n].color.R=parseInt(rgb[0]) ;
							this.Colorselect.Mise[n].color.G=parseInt(rgb[1]) ;
							this.Colorselect.Mise[n].color.B=parseInt(rgb[2]) ;
							this.Colorselect.Mise[n].color.A=rgb[3] ;
							let max=this.Colorselect.Mise[n].color.R
							for(let i in this.Colorselect.Mise[n].color){
								var cat =this.Colorselect.Mise[n].color[i]
								cat > max ? max=cat :null
								
							}
							for(let i in this.Colorselect.Mise[n].color){
								this.Colorselect.Mise[n].color[i]=parseInt(this.Colorselect.Mise[n].color[i]/max*1000)/1000
								if(this.Colorselect.Mise[n].color[i]==this.Colorselect.Mise[n].color.A){
									this.Colorselect.Mise[n].color[i]=parseInt(rgb[3]*100)/100
									
								}
							}
							
						}
					}
				}
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				let names,json2;
				
				// let upname = this.ColorGrading;
				for(let i in upname){
					upname2=i.match(name)
					// console.log('index if 内部',upname2)
					if(upname2 != null){
						
						if(upname2.input == "Global"){
							
							names=this.ColorGrading.Global[n].name
							json2={
								X: this.Colorselect.Global[n].color.R,
								Y: this.Colorselect.Global[n].color.G,
								Z: this.Colorselect.Global[n].color.B,
								W: this.Colorselect.Global[n].color.A
							}
							
						}else if(upname2.input == "Shadows"){
							names=this.ColorGrading.Shadows[n].name
							json2={
								X: this.Colorselect.Shadows[n].color.R,
								Y: this.Colorselect.Shadows[n].color.G,
								Z: this.Colorselect.Shadows[n].color.B,
								W: this.Colorselect.Shadows[n].color.A
							}
						}
						else if(upname2.input == "Midtones"){
							names=this.ColorGrading.Midtones[n].name
							json2={
								X: this.Colorselect.Midtones[n].color.R,
								Y: this.Colorselect.Midtones[n].color.G,
								Z: this.Colorselect.Midtones[n].color.B,
								W: this.Colorselect.Midtones[n].color.A
							}
						}
						else if(upname2.input == "Highlights"){
							names=this.ColorGrading.Highlights[n].name
							json2={
								X: this.Colorselect.Highlights[n].color.R,
								Y: this.Colorselect.Highlights[n].color.G,
								Z: this.Colorselect.Highlights[n].color.B,
								W: this.Colorselect.Highlights[n].color.A
							}
						}
						else if(upname2.input == "Mise"){
							names=this.ColorGrading.Mise[n].name
							json2={
								X: this.Colorselect.Mise[n].color.R,
								Y: this.Colorselect.Mise[n].color.G,
								Z: this.Colorselect.Mise[n].color.B,
								W: this.Colorselect.Mise[n].color.A
							}
						}
						
						
					}
				}
				
				if(color == null){
						json2={
							X: 1,
							Y: 1,
							Z: 1,
							W: 1
						}
						
					}
				// let json3 ={
				// 	"Settings":{
						
				// 	}
				// }
				// json3.seting[names]=json2
				let json={
					"Settings":{
							
					}
				}
				json.Settings[names] =json2
		// console.log(json)
				
				
				// json2.R != '' &&
				if(json2!=null && this.activeNames.length >1){
					this.axios.put('/remote/object/property',
				{
						"objectPath" :this.ObjectPath,
							"access" :this.Access,
							"propertyName" :"Settings",
							"propertyValue" :json
								 
					
				},
				{
					headers:{
						'Content-Type': 'application/json'
					}
				}
				
				
				).then((res) =>{
					// this.setthisvalue(2)
					// console.log(res)	
					
				})
				
				}
				
			},
			setthisvalue(n){
					if(n == 1){
						this.$store.commit('setpostvalue',this.value2)
						
					}else if(n==2 ){
						this.$store.commit('setpostcolor',this.color)
						
					}
				
				
			},
			getstorevalue(){
				this.value2=this.$store.state.postvalue
				this.color=this.$store.state.postcolor
			},
			
			GetObjectPath(){
				let  Matchname ,objectPath;
				
				let textobjname=this.$store.state.objectPath.ReturnValue
				
				for(let i=0;i<textobjname.length;i++){
					
					 Matchname =textobjname[i].match(this.text)
					if(Matchname != null){
						 objectPath=Matchname.input
						this.ObjectPath=objectPath
						
						console.log(objectPath)
						
					}
					
				}
				// let test =text.ReturnValue.match('PostProcessVolume')
				
			},
			
			slidervalue(){
				
				if(this.value2 != 0){
					this.axios.put('/remote/object/property',
				{
						"objectPath" :this.ObjectPath,
							"access" :this.Access,
							"propertyName" :"Settings",
							"propertyValue" :{
								"Settings":{
									"AutoExposureBias":this.value2
								}
							}
								 
					
				},
				{
					headers:{
						'Content-Type': 'application/json'
					}
				}
				
				
				).then((res) =>{
					
					// this.setthisvalue(1)
				},
				(err)=>{
					
				}
				)
				}
				
			},
			
		}
		
		
		
	}
	
	
	
</script>

<style >
	
	.block{
		width: 95%;
		
	
	}
	/* .demonstration{
		margin-top: 2px;
		margin-bottom: 10PX;
		display: flex;
		justify-content: flex-start;
		margin-left: -10px;
	} */
	.el-color-picker{
		width: 100%;
		margin-top: 10px;
	}
	.el-color-picker__trigger{
		width: 100%;
		height: 30px;
	}.el-collapse-item__header{
		background-color: #333A46;
	font-size:25px;	border-bottom: #333A46;
		color: #FFFFFF;
		text-align: center;
	}
	
	.el-collapse-item__content{
		background-color: #333A46;
		margin-left: 10px;
		/* border-bottom: #333A46; */
		padding-bottom:10px;
		
	}
	.el-collapse-item__wrap {
		background-color: #333A46;
		border-bottom: #333A46;
	}.el-collapse-item__header :last-child{
		/* background-color: red; */
		/* border-bottom: #333A46; */
	}
 .spancss{color:#FFFFFF; font-size:20px }  .el-checkbox__inner{width:30px; height:30px}	.el-checkbox__inner::after{height:26px; left:13px} 
</style>
